import React, { Component } from 'react';
import { connect } from 'react-redux';
import { reset_current_brand,reset_current_brand_async,update_brand } from '../redux/actions';

class Update extends Component {
    render() {
        return (
            <div className="form">
                <div className="form-group">
                    <input value={this.props.brandCurrent.name} onChange={this.inputChange.bind(this)} type="text" className="form-control" placeholder="请输入品牌名称"/>
                </div>
                <div className="form-group">
                    <button onClick={()=>this.updateBrand()} className="btn btn-primary">确认更新</button>
                </div>
        </div>
        )
    }
    // 手动实现双向数据绑定
    inputChange(event){
        const {id}=this.props.brandCurrent;
        this.props.reset_current_brand({id,name:event.target.value,ctime:parseInt(Date.now()/1000)});
    }
    updateBrand(){
        if(this.props.brandCurrent.name.trim()===''){
            return alert('品牌名称不能为空!');
        }
        this.props.reset_current_brand_async(this.props.brandCurrent);
        // 重置表单
        this.props.reset_current_brand({name:''});
    }
}

export default connect(
    state=>({brandCurrent:state.brandCurrent}),
    {
        reset_current_brand,reset_current_brand_async,update_brand
    }
)(Update)
